<template>
	<view class="order-list">
		<view class="order">
			<block v-for="(item,index) in order_list" :key="index">
				<view v-if="type==0 || type == 1 " class="order-tab" @click="onGoDetail(item)">
					<view class="fz17 font-weight name">
						<text>{{item.title}}</text>
					</view>
					<view class="info">
						<view class="left">
							<view class="" v-if="type == 0">
								<text>门票 - {{item.spotTicketTitle}}</text>
							</view>
							<view v-if="type == 1">
								<text>房间 - {{item.roomName}}</text>
							</view>
							<view v-if="item.status != '1' && type == 0">
								<text>游玩日期：{{item.travelDate}}</text>
							</view>
							<view>
								<text>创建日期：{{item.createTime}}</text>
							</view>
							<view>
								<text>总价：{{item.payAmount}}</text>
							</view>
						</view>
						<view class="right">
							<view>
								<!--待支付-->
								<text style="color: #ff8f90;" v-if="item.status == '1'" class="iconfont icon-daizhifu"></text>
								<!--未使用-->
								<text style="color: #64c889;" v-else-if="item.status == '2'" class="iconfont icon-weishiyong"></text>
								<!--已使用-->
								<text style="color: #999999;" v-else-if="item.status == '3'" class="iconfont icon-yishiyong"></text>
								<!--已取消-->
								<text style="color: #999999;" v-else-if="item.status == '4'" class="iconfont icon-yiquxiao"></text>
								<!--退款中-->
								<text style="color: #52b0ec;" v-else-if="item.status == '5'" class="iconfont icon-shiliangzhinengduixiang"></text>
								<!--已退款-->
								<text style="color: #52b0ec;" v-else-if="item.status == '6'" class="iconfont icon-yituikuan"></text>
								<text style="color: #999999;" v-else class="iconfont icon-yiwancheng"></text>
							</view>
						</view>
					</view>
				</view>
				<view v-else-if="type == 3" class="order-tab" @click="onGoGoodsDetail(item)">
					<view class="fz17 font-weight name">
						<text>{{item.orderNumber}}</text>
					</view>
					<view class="info" style="height: 120upx;">
						<view class="left">
							<view>
								<text>下单时间：{{item.createTime||""}}</text>
							</view>
							<view>
								<text>总价：{{item.orderAmount}}</text>
							</view>
						</view>
						<view class="right">
							<view>
								<!-- <text style="color: #52b0ec;" v-if="item.status == '退款中'" class="iconfont icon-shiliangzhinengduixiang"></text>
								<text style="color: #ff8f90;" v-else-if="item.status == '退货中'" class="iconfont icon-tuihuozhong"></text>
								<text style="color: #faac5f;" v-else-if="item.status == '已发货'" class="iconfont icon-yifahuo"></text>
								<text style="color: #ff8f90;" v-else-if="item.status == '待支付'" class="iconfont icon-daizhifu"></text>
								<text style="color: #64c889;" v-else-if="item.status == '已退款'" class="iconfont icon-yituikuan"></text>
								<text style="color: #999999;" v-else-if="item.status == '已支付'" class="iconfont icon-yizhifu"></text>
								<text style="color: #ff8f90;" v-else-if="item.status == '申请退款'" class="iconfont icon-shenqingtuikuan"></text>
								<text style="color: #999999;" v-else-if="item.status == '已取消'" class="iconfont icon-yiquxiao"></text>
								<text style="color: #999999;" v-else-if="item.status == '已过期'" class="iconfont icon-shiliangzhinengduixiang2"></text>
								<text style="color: #999999;" v-else-if="item.status == '已完成'" class="iconfont icon-yiwancheng"></text>
								<text style="color: #999999;" v-else class="iconfont icon-yiwancheng"></text> -->
								<text style="color: #52b0ec;" v-if="item.status == '6'" class="iconfont icon-shiliangzhinengduixiang"></text>
								<text style="color: #ff8f90;" v-else-if="item.status == '退货中'" class="iconfont icon-tuihuozhong"></text>
								<text style="color: #faac5f;" v-else-if="item.status == '3'" class="iconfont icon-yifahuo"></text>
								<text style="color: #ff8f90;" v-else-if="item.status == '1'" class="iconfont icon-daizhifu"></text>
								<text style="color: #64c889;" v-else-if="item.status == '已退款'" class="iconfont icon-yituikuan"></text>
								<text style="color: #999999;" v-else-if="item.status == '2'" class="iconfont icon-yizhifu"></text>
								<text style="color: #ff8f90;" v-else-if="item.status == '申请退款'" class="iconfont icon-shenqingtuikuan"></text>
								<text style="color: #999999;" v-else-if="item.status == '5'" class="iconfont icon-yiquxiao"></text>
								<text style="color: #999999;" v-else-if="item.status == '已过期'" class="iconfont icon-shiliangzhinengduixiang2"></text>
								<text style="color: #999999;" v-else-if="item.status == '4'" class="iconfont icon-yiwancheng"></text>
								<text style="color: #999999;" v-else class="iconfont icon-yiwancheng"></text>
							</view>
						</view>
					</view>
				</view>
			</block>
			<vline color="#f5f5f5" height="40upx"></vline>
			<wxc-flex v-if='isshowTip && order_list.length>0' dir='left' main='center' cross='center' style='width:100%;margin-top:40upx;margin-bottom:40upx;'>
				<vline color='#DDDDDD' width='120upx' height='1px'></vline>
				<text class='font-r' style='font-size:24upx;color:#464646;margin-left:26upx;margin-right:26upx;'>没有更多数据啦</text>
				<vline color='#DDDDDD' width='120upx' height='1px'></vline>
			</wxc-flex>
		</view>

	</view>
</template>

<script>
	import wxcFlex from "@/components/custom/flex.vue";
	import vline from "@/components/custom/vline.vue";
	var currentPage = 1;
	export default {
		components: {
			wxcFlex,
			vline,
		},
		data() {
			return {
				order_list: [],
				type: 0,
				isshowTip: false, // 加载更多没有数据了
				isEmpty: false, // 没有数据的图片
			};
		},
		onLoad: function(options) {
			console.log("传过来的参数type:", options.item);

			//#ifdef H5
			document.title = '我的订单'
			//#endif
			this.type = options.item || 0;
		},
		onShow: function() {
			currentPage = 1;
			if (this.type == 0 ) { //景区门票
				this.getTouristOrderList();
			}else if(this.type == 1){//酒店
				this.getHotelOrderList();
			} else if (this.type == 3) { //购物
				this.getGoodsOrderList();
			}
		},
		onReachBottom: function() {
			if (!this.isshowTip) {
				if (this.type == 0 || this.type == 1) { //景区门票
					this.getTouristOrderList();
				} else if (this.type == 3) { //购物
					this.getGoodsOrderList();
				}
			}
		},
		methods: {
			onGoDetail(item) {
				uni.setStorage({
					key: 'order_detail',
					data: item
				});
				console.log("type:", this.type);
				uni.navigateTo({
					url: '/pages/order/neworderdetail?type=' + this.type,
				})
			},
			onGoGoodsDetail(item) {
				uni.setStorage({
					key: 'order_detail',
					data: item
				});
				console.log("选中的订单----------------》",item)
				uni.navigateTo({
					url: '/pages/order/neworderdetail?type=' + this.type + "&orderid=" + item.id + "&bustype=" + item.bustype + "&orderNumber=" + item.orderNumber,
				})
			},
			getHotelOrderList(){
				uni.showLoading({
					title: "正在加载...",
					mask: true
				})
				let params = {
					pageIndex :currentPage,
					pageSize  :'10',
					channelType: '1',
					openid:this.pub.getOpenid()
				}
				this.$postApi(this.$path.HOTEL_ORDER_LIST,params).then(res => {
					uni.hideLoading()
					console.log("酒店订单返回数据-------------->",res.data)
					if(res.data.success){
						let list = res.data.data.list
						let spotdata = []
						if (currentPage == 1) {
							spotdata = list;
						} else {
							spotdata = this.order_list.concat(list)
						}
						
						currentPage++;
						let isshowTip = false;
						let isEmpty = false;
						
						if (spotdata.length == 0) { //无数据，显示无数据提示
							isEmpty = true;
							spotdata = [];
						} else if (!res.data.hasNextPage){
							isshowTip = true;
						}
						
						this.order_list = spotdata;
						this.isshowTip = isshowTip;
						this.isEmpty = isEmpty;
					}else{
						this.spotdata = [];
						this.isEmpty = true;
						this.isshowTip = false;
					}
					
				})
			},
			getTouristOrderList() {
				uni.showLoading({
					title: "正在加载...",
					mask: true
				})
				
				let account = this.pub.getAccount();

				this.$postApi(this.$path.GET_SCENICSPOT_ORDERLIST, {
					pageIndex: currentPage,
					pageSize: 10,
					unionId: account,
					type: this.type
				}).then(res => {
					uni.hideLoading();
					console.log('订单返回数据---------->', res.data);
					let data = res.data;
					if (data.success) {
						var spotdata;
						if (currentPage == 1) {
							spotdata = data.data.list;
						} else {
							spotdata = this.order_list.concat(data.data.list)
						}

						currentPage++;
						let isshowTip = false;
						let isEmpty = false;

						if (spotdata.length == 0) { //无数据，显示无数据提示
							isEmpty = true;
							spotdata = [];
						} else if (data.data.list.length >= data.total) { //无更多数据
							isshowTip = true;
						}

						this.order_list = spotdata;
						this.isshowTip = isshowTip;
						this.isEmpty = isEmpty;
					} else {
						this.spotdata = [];
						this.isEmpty = true;
						this.isshowTip = false;
					}

				})
			},
			getGoodsOrderList() {
				uni.showLoading({
					title: "正在加载...",
					mask: true
				})
				let account = this.pub.getAccount();
				var params = {
					pageIndex: currentPage,
					pageSize: '10',
					channelType: '1',
					openid: this.pub.getOpenid()
				}
				this.$postApi(this.$path.GOODS_ORDER_LIST, params).then(res => {
					uni.hideLoading();
					console.log("购物订单列表-------------------->", res.data)
					// let list = res.data;
					let goodsdata = []
					if (res.data.success) {
						let list = res.data.data.list
						
						if (currentPage == 1) {
							goodsdata = list;
						} else {
							goodsdata = this.order_list.concat(list)
						}

						currentPage++;
						let isshowTip = false;
						let isEmpty = false;

						if (res.data.data == "") { //无数据，显示无数据提示
							isEmpty = true;
							goodsdata = [];
						} else if ( !res.data.data.hasNextPage ) { //无更多数据
							isshowTip = true;
						}

						this.order_list = goodsdata;
						this.isshowTip = isshowTip;
						this.isEmpty = isEmpty;
					} else {
						this.order_list = [];
						this.isshowTip = false;
						this.isEmpty = true;
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// uni-page-body, uni-page-refresh{
	// 	height: 100% !important;
	// }
	.order-list {
		// height: 100%;
		min-height: 100%;
		background: #f5f5f5;
		font-size: 26upx;
	}

	.order {
		padding: 20upx;
	}

	.order-tab {
		margin-top: 20upx;
		background: #fff;
		border-radius: 14upx;
		padding: 20upx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.name {
			border-bottom: 1upx solid #eee;
			padding: 20upx;
		}

		.info {
			display: flex;
			color: #666666;
			flex-direction: row;
			justify-content: space-between;
			padding: 20upx;
			height: 200upx;

			.left {
				width: 80%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}

			.right {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 120upx;
			}

			.right2 {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
